<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimal-ui">
    <title>菜单管理 - 后台管理系统模板</title>
    <link rel="icon" href="favicon.ico" type="image/ico">
    <meta name="keywords" content="菜单管理">
    <meta name="description" content="菜单管理页">
    <meta name="author" content="yinqi">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="default">
    <style> /* 此样式要放在bootstrap-lyear-dropdowntree.css之上，否则会被覆盖。*/
        .lyear-dropdown-tree {
            position: relative;
            flex:1 1 0%;
        }
        .lyear-dropdown-tree .checkbox-box,
        .lyear-dropdown-tree .radio-box {
            font-size: 15px;
            cursor: pointer;
        }
        .lyear-dropdown-tree .arrow {
            margin-left: -15px;
        }
        .lyear-dropdown-tree .checkbox-box:before {
            content: "\F131";
        }
        .lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-checked:before {
            content: "\F135";
        }
        .lyear-dropdown-tree .checkbox-box.lyear-dropdown-tree-half-checked:before {
            content: "\F6F1";
        }
        .lyear-dropdown-tree .radio-box:before {
            content: "\F130";
        }
        .lyear-dropdown-tree .radio-box.lyear-dropdown-tree-checked:before {
            content: "\F134";
        }
        .lyear-dropdown-tree .radio-box.lyear-dropdown-tree-half-checked:before {
            content: "\F377";
        }
        .lyear-dropdown-tree .dropdown-menu {
            min-width: 100%;
            overflow-y: auto;
            overflow-x: auto;
            padding-bottom: 13px;
        }
        .lyear-dropdown-tree .dropdown-menu > li {
            margin-left:  15px;
        }
        .lyear-dropdown-tree .dropdown-menu li ul {
            list-style: none;
            padding-left: 25px;
        }
        .lyear-dropdown-tree .dropdown-menu li ul a {
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
            padding: 3px 20px;
        }
        .lyear-dropdown-tree .dropdown-menu li a {
            display: inline-block;
            padding-left: 15px!important;
            width: auto;
        }
        .lyear-dropdown-tree .dropdown-menu li a.lyear-dropdown-tree-a-checked {
            color: #33cabb;
        }
        .lyear-dropdown-tree .dropdown-menu a:hover,
        .lyear-dropdown-tree .dropdown-menu a:active,
        .lyear-dropdown-tree .dropdown-menu a:focus {
            background-color: transparent;
        }
        .lyear-dropdown-tree .form-control {
            padding-right: 30px;
            cursor: pointer;
        }
        .lyear-dropdown-tree i.lyear-cert {
            font-size: 20px;
            position: absolute;
            top: 3px;
            right: 5px;
        }
        /*bootstrap-select插件用到的，也可以不用*/
        .bootstrap-select.open .dropdown-toggle {
            border-color: #33cabb!important;
            -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(51, 202, 187, .6);
        }
        .bootstrap-select.open .dropdown-menu.open {
            border: 1px solid #ebebeb;
        }
        /*示例二、三、四、五*/
        .p-t-5 {
            padding-top: 5px;
        }
        /*示例五*/
        .input-group-controls {
            height: 36px;
            flex: 1 1 0%;
            border: 1px solid #F2F3F3;
            padding-left: 15px;
        }
    </style>

    <link href="/common/libs/materialdesignicons/materialdesignicons.min.css" rel="stylesheet" type="text/css" >
    <link href="/common/libs/fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet" type="text/css" >
    <link href="/common/libs/bootstrap5.3.2/css/bootstrap.min.css" rel="stylesheet" type="text/css" >
    <link href="/common/libs/bootstrap-lyear-dropdowntree/bootstrap-lyear-dropdowntree.css" rel="stylesheet" type="text/css" >
    <link href="/common/libs/animate/animate.min.css" rel="stylesheet" type="text/css" >
    <link href="/common/libs/jquery-confirm/jquery-confirm.min.css" rel="stylesheet" type="text/css" >
    <!-- required default theme -->

    <link href="/common/libs/bootstrap-table/bootstrap-table.min.css"  rel="stylesheet" type="text/css">
    <link href="/common/libs/jquery-treegrid/jquery.treegrid.min.css"  rel="stylesheet" type="text/css">
    <link href="/system/css/style.min.css" rel="stylesheet" type="text/css" >
    <!--  图标选择-开始  -->
    <link rel="stylesheet" type="text/css"  href="/common/libs/fontIconPicker/css/jquery.fonticonpicker.min.css">
    <link rel="stylesheet" type="text/css" href="/common/libs/fontIconPicker/themes/bootstrap-theme/jquery.fonticonpicker.bootstrap.min.css" />
    <!--  图标选择-结束  -->

</head>
<body>
<!-- 模态框-开始 -->
<div>



    <div class="modal fade" id="addTermModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalGridTitle" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title" id="exampleModalGridTitle">编辑菜单</h6>
                    <button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="termAddForm" class="row">
                        <div class="form-group col-12">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">父级分类</span></div>
                                <div class="lyear-dropdown-tree" id="lyear-dropdown-tree">
                                    <input type="text" class="form-control" id="parentSelect" name="parentSelect" placeholder="请选择父分类" data-bs-toggle="dropdown" readonly>
                                    <input type="hidden" name="parentId" id="parentId"/>
                                </div>
                            </div>
                        </div>

                        <div class="form-group col-12">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text" id="permNameLabel">菜单名称</span></div>
                                <input type="text" name="name" class="form-control">
                                <input type="hidden" name="oldName"  class="form-control">
                                <input type="hidden" name="id"  class="form-control">
                            </div>
                        </div>
                        <div class="form-group col-12 menu-icon-list-row">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">图&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;标</span></div>
                                <#--                                <input id="menu-icon"  type="text" name="icon" class="form-control">-->
                                <input id="system-menu-icon-picker" name="icon" class="form-control" type="text" /> 选择后可直接获取选择后的值。例如：<code>$("#system-menu-icon-picker").val();</code>
                                <span id="show-mdi"></span>
                                <div class="invalid-feedback">请选择图标</div>
                            </div>
                        </div>
                        <div class="form-group col-12 menu-perms-list-row">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">链&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;接</span></div>
                                <input id="term-link"  type="text" name="link" class="form-control">
                            </div>
                        </div>
                        <div class="form-group col-12 menu-perms-list-row">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">状&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;态</span></div>
                                <input id="menuStatus"  type="text" name="status" class="form-control">
                            </div>
                        </div>
                        <div class="form-group col-12 menu-perms-list-row">
                            <div class="input-group">
                                <div class="input-group-prepend"><span class="input-group-text">排&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;序</span></div>
                                <input id="menuSort"  type="text" name="sort" class="form-control">
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary btn-close" data-bs-dismiss="modal"></button> <!-- 关闭按钮 -->
                    <button type="button" class="btn btn-primary"  name="save" id="termAddBtn">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 模态框-结束 -->



<div class="container-fluid p-t-15">
    <div class="row">
        <div class="col-lg-12">
            <div class="card">
                <header class="card-header"><div class="card-title">分类管理</div></header>
                <div class="card-body">
                    <div id="toolbar" class="toolbar-btn-action">
                        <button id="btn_add" type="button" class="btn btn-primary m-r-5" data-bs-toggle="modal" data-bs-target="#addTermModal">
                            <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                        </button>
                        <button id="btn_delete" type="button" class="btn btn-danger" onclick="deleteTerms()">
                            <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                        </button>
                    </div>
                    <div class="table-responsive">
                        <table class="tree-table text-nowrap" id="termsTable"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/common/libs/jquery/jquery-3.7.1.min.js" type="text/javascript" ></script>

<script src="/common/libs/popper/popper.min.js" type="text/javascript"></script>
<script src="/common/libs/bootstrap5.3.2/js/bootstrap.min.js" type="text/javascript"></script>
<script src="/common/libs/perfect-scrollbar/perfect-scrollbar.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-cookie/jquery.cookie.min.js" type="text/javascript"></script>
<script src="/common/libs/bootstrap-notify/bootstrap-notify.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-confirm/jquery-confirm.min.js" type="text/javascript"></script>
<script src="/common/libs/lyear-loading/lyear-loading.js" type="text/javascript"></script>
<script src="/system/js/common.js" type="text/javascript"></script>
<script src="/system/js/index.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-validate/jquery.validate.min.js" type="text/javascript"></script>
<script src="/common/libs/jquery-validate/messages_zh.min.js" type="text/javascript"></script>
<#--<script src="/system/ebook/category/js/main.min.js" type="text/javascript"></script>-->


<script type="text/javascript" src="/common/libs/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/common/libs/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
<!--以下是tree-grid的使用示例-->
<script src="/common/libs/jquery-treegrid/jquery.treegrid.min.js"></script>
<script type="text/javascript" src="/common/libs/bootstrap-table/extensions/treegrid/bootstrap-table-treegrid.min.js"></script>
<script type="text/javascript" src="/common/libs/bootstrap-lyear-dropdowntree/bootstrap-lyear-dropdowntree.js"></script>
<!-- fontIconPicker JS -->
<script type="text/javascript" src="/common/libs/fontIconPicker/jquery.fonticonpicker.min.js"></script>
<script type="text/javascript" src="/system/ebook/category/js/category.js"></script>
<script type="text/javascript" src="/system/ebook/category/js/categoryAdd.js"></script>
<script type="text/javascript" src="/system/ebook/category/js/categoryEdit.js"></script>


<script type="text/javascript">
    /********** --图标选择-开始-- **********/
    jQuery(document).ready(function($) {
        var font_element = $('#system-menu-icon-picker').fontIconPicker({
            theme: 'fip-bootstrap'
        });

        $.ajax({
            url: '/common/libs/fontIconPicker/fontjson/materialdesignicons.json',
            type: 'GET',
            dataType: 'json'
        }).done(function(response) {

            var fontello_json_icons = [];

            $.each(response.glyphs, function(i, v) {
                fontello_json_icons.push( v.css );
            });

            font_element.setIcons(fontello_json_icons);
        }).fail(function() {
            console.error('字体图标配置加载失败');
        });

        $(document).on('change', '#system-menu-icon-picker', function(){
            $('#show-mdi').html($(this).val());
        });
    });
    /********** --图标选择-结束-- **********/
</script>




</body>
</html>

